<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信访分析系统 - 分析结果</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 侧边栏动画 */
        .sidebar {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-collapsed {
            width: 64px !important;
        }
        .sidebar-expanded {
            width: 15% !important;
        }

        /* 文本淡入淡出 */
        .fade-text {
            transition: opacity 0.3s ease-in-out;
        }
        .fade-text.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 导航菜单项 */
        .nav-item {
            transition: all 0.3s ease;
            position: relative;
        }
        .nav-item::after {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 0;
            background: var(--primary-gradient);
            border-radius: 0 2px 2px 0;
            transition: height 0.3s ease;
        }
        .nav-item:hover::after,
        .nav-item.active::after {
            height: 70%;
        }
        .nav-item:hover {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
        }
        .nav-item.active {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, transparent 100%);
            color: #667eea;
        }

        /* 结果卡片 */
        .result-card {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .result-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.6s;
        }
        .result-card:hover::before {
            left: 100%;
        }
        .result-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        /* 筛选标签 */
        .filter-tag {
            transition: all 0.2s ease;
        }
        .filter-tag:hover {
            transform: scale(1.05);
        }

        /* 表格行悬停 */
        .table-row-hover {
            transition: all 0.2s ease;
        }
        .table-row-hover:hover {
            background: rgba(102, 126, 234, 0.05);
        }

        /* 分页按钮 */
        .page-btn {
            transition: all 0.2s ease;
        }
        .page-btn:hover:not(.active):not(:disabled) {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
        }
        .page-btn.active {
            background: var(--primary-gradient);
            color: white;
        }
        .page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
</head>
<body class="bg-slate-50">
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col">
            <!-- 应用标题 -->
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
                            <i class="fas fa-file-contract text-white text-lg"></i>
                        </div>
                        <div class="fade-text">
                            <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">信访分析系统</h1>
                            <p class="text-xs text-slate-500">智能分析平台</p>
                        </div>
                    </div>
                    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-bars text-slate-600"></i>
                    </button>
                </div>
            </div>

            <!-- 导航菜单 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar">
                <nav class="p-4">
                    <ul class="space-y-2">
                        <li>
                            <a href="dashboard.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-dashboard text-lg"></i>
                                <span class="fade-text font-medium">仪表盘</span>
                            </a>
                        </li>
                        <li>
                            <a href="analysis-results.html" class="nav-item active flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-search text-lg"></i>
                                <span class="fade-text font-medium">分析结果</span>
                            </a>
                        </li>
                        <li>
                            <a href="petition-statistics.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-chart-bar text-lg"></i>
                                <span class="fade-text font-medium">信访件统计</span>
                            </a>
                        </li>
                        <li>
                            <a href="regional-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map text-lg"></i>
                                <span class="fade-text font-medium">区域分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="coordinate-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map-marker-alt text-lg"></i>
                                <span class="fade-text font-medium">经纬度分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="key-issues.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-exclamation-triangle text-lg"></i>
                                <span class="fade-text font-medium">重点问题分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="report-generation.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-file-alt text-lg"></i>
                                <span class="fade-text font-medium">生成报告</span>
                            </a>
                        </li>
                        
                        <!-- 管理员功能 -->
                        <li class="pt-4 mt-4 border-t border-slate-200">
                            <p class="fade-text text-xs text-slate-500 font-semibold px-4 mb-2">管理员功能</p>
                        </li>
                        <li>
                            <a href="ai-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-robot text-lg"></i>
                                <span class="fade-text font-medium">AI分析功能</span>
                            </a>
                        </li>
                        <li>
                            <a href="system-settings.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-cog text-lg"></i>
                                <span class="fade-text font-medium">系统设置</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 用户信息 -->
            <div class="p-4 border-t border-slate-200">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg">
                        <i class="fas fa-user text-white text-lg"></i>
                    </div>
                    <div class="fade-text flex-1">
                        <p class="font-semibold text-slate-800">管理员</p>
                        <p class="text-xs text-slate-500">admin@example.com</p>
                    </div>
                    <div class="relative">
                        <button id="userMenuBtn" class="fade-text p-2 rounded-lg hover:bg-slate-100 transition-colors">
                            <i class="fas fa-chevron-down text-slate-600"></i>
                        </button>
                        <!-- 下拉菜单 -->
                        <div id="userMenu" class="hidden absolute right-0 bottom-full mb-2 w-48 bg-white rounded-lg shadow-lg border border-slate-200">
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-t-lg">
                                <i class="fas fa-user-circle mr-2"></i>个人中心
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100">
                                <i class="fas fa-cog mr-2"></i>账户设置
                            </a>
                            <hr class="my-1 border-slate-200">
                            <a href="login.html" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-b-lg">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部栏 -->
            <header class="bg-white border-b border-slate-200 px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold text-slate-800">分析结果</h2>
                        <p class="text-sm text-slate-500">查看和分析AI处理后的信访数据</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                            <i class="fas fa-download mr-2"></i>导出结果
                        </button>
                    </div>
                </div>
            </header>

            <!-- 滚动内容区 -->
            <main class="flex-1 overflow-y-auto custom-scrollbar p-6">
                <!-- 查询条件区域 -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
                    <h3 class="text-lg font-semibold text-slate-800 mb-4">查询条件</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
                        <!-- 分析结果选择 -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">分析结果</label>
                            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <option>全部结果</option>
                                <option>任务一 - 环境污染分析</option>
                                <option>任务二 - 噪音扰民分析</option>
                                <option>任务三 - 市容管理分析</option>
                            </select>
                        </div>

                        <!-- 区域选择 -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">区域</label>
                            <div class="flex space-x-2">
                                <select class="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    <option>全部区县</option>
                                    <option>福田区</option>
                                    <option>罗湖区</option>
                                    <option>南山区</option>
                                    <option>宝安区</option>
                                    <option>龙岗区</option>
                                </select>
                                <select class="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    <option>全部街道</option>
                                    <option>梅林街道</option>
                                    <option>华强北街道</option>
                                    <option>沙河街道</option>
                                </select>
                            </div>
                        </div>

                        <!-- 污染标签 -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">污染标签</label>
                            <div class="space-y-2">
                                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    <option>一级标签</option>
                                    <option>环境污染</option>
                                    <option>噪音扰民</option>
                                    <option>市容管理</option>
                                </select>
                                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    <option>二级标签</option>
                                    <option>空气污染</option>
                                    <option>水污染</option>
                                    <option>土壤污染</option>
                                </select>
                                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    <option>三级标签</option>
                                    <option>工业废气</option>
                                    <option>汽车尾气</option>
                                    <option>扬尘污染</option>
                                </select>
                            </div>
                        </div>

                        <!-- 时间范围 -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">时间范围</label>
                            <div class="space-y-2">
                                <select id="timeRange" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    <option>本月</option>
                                    <option>上月</option>
                                    <option>本季度</option>
                                    <option>全部</option>
                                    <option>自定义</option>
                                </select>
                                <div id="customDateRange" class="hidden space-y-2">
                                    <input type="date" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    <input type="date" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 搜索和操作按钮 -->
                    <div class="flex items-center justify-between">
                        <div class="flex-1 max-w-md">
                            <div class="relative">
                                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                                <input type="text" placeholder="搜索信访内容、编号等..." class="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            </div>
                        </div>
                        <div class="flex space-x-3 ml-4">
                            <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                <i class="fas fa-search mr-2"></i>查询
                            </button>
                            <button class="px-6 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                                <i class="fas fa-redo mr-2"></i>重置
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 筛选标签 -->
                <div class="flex flex-wrap gap-2 mb-6">
                    <span class="filter-tag px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm flex items-center">
                        福田区
                        <i class="fas fa-times ml-2 cursor-pointer"></i>
                    </span>
                    <span class="filter-tag px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm flex items-center">
                        环境污染
                        <i class="fas fa-times ml-2 cursor-pointer"></i>
                    </span>
                    <span class="filter-tag px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm flex items-center">
                        2024年1月
                        <i class="fas fa-times ml-2 cursor-pointer"></i>
                    </span>
                    <button class="px-3 py-1 text-sm text-slate-500 hover:text-slate-700">
                        清除全部
                    </button>
                </div>

                <!-- 查询结果 -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200">
                    <!-- 结果统计 -->
                    <div class="p-6 border-b border-slate-200">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-6">
                                <span class="text-sm text-slate-600">找到 <span class="font-semibold text-indigo-600">234</span> 条结果</span>
                                <span class="text-sm text-slate-600">当前显示第 <span class="font-semibold">1-10</span> 条</span>
                            </div>
                        </div>
                    </div>

                    <!-- 结果列表 -->
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead class="bg-slate-50">
                                <tr>
                                    <th class="text-left p-4 font-semibold text-slate-700">信访编号</th>
                                    <th class="text-left p-4 font-semibold text-slate-700">信访内容</th>
                                    <th class="text-left p-4 font-semibold text-slate-700">区域</th>
                                    <th class="text-left p-4 font-semibold text-slate-700">污染类型</th>
                                    <th class="text-left p-4 font-semibold text-slate-700">AI分析结果</th>
                                    <th class="text-left p-4 font-semibold text-slate-700">处理状态</th>
                                    <th class="text-left p-4 font-semibold text-slate-700">操作</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-200">
                                <tr class="table-row-hover">
                                    <td class="p-4">
                                        <span class="font-medium text-indigo-600">#XF20240115001</span>
                                    </td>
                                    <td class="p-4">
                                        <div class="max-w-xs">
                                            <p class="text-sm text-slate-800 truncate">深圳市南山区某小区附近工厂排放刺鼻废气，严重影响居民生活...</p>
                                        </div>
                                    </td>
                                    <td class="p-4">
                                        <span class="text-sm text-slate-600">南山区</span>
                                        <span class="text-xs text-slate-500 block">沙河街道</span>
                                    </td>
                                    <td class="p-4">
                                        <span class="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">空气污染</span>
                                    </td>
                                    <td class="p-4">
                                        <div class="text-sm">
                                            <p class="text-slate-800">置信度: <span class="font-semibold text-green-600">92%</span></p>
                                            <p class="text-xs text-slate-500 mt-1">主要污染物: 二氧化硫、氮氧化物</p>
                                        </div>
                                    </td>
                                    <td class="p-4">
                                        <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">处理中</span>
                                    </td>
                                    <td class="p-4">
                                        <button onclick="showViewModal('#XF20240115001')" class="text-indigo-600 hover:text-indigo-800 text-sm mr-3">
                                            <i class="fas fa-eye mr-1"></i>查看
                                        </button>
                                        <button onclick="showEditModal('#XF20240115001')" class="text-green-600 hover:text-green-800 text-sm">
                                            <i class="fas fa-edit mr-1"></i>编辑
                                        </button>
                                    </td>
                                </tr>

                                <tr class="table-row-hover">
                                    <td class="p-4">
                                        <span class="font-medium text-indigo-600">#XF20240114023</span>
                                    </td>
                                    <td class="p-4">
                                        <div class="max-w-xs">
                                            <p class="text-sm text-slate-800 truncate">福田区梅林街道某建筑工地夜间施工噪音扰民，影响周边居民休息...</p>
                                        </div>
                                    </td>
                                    <td class="p-4">
                                        <span class="text-sm text-slate-600">福田区</span>
                                        <span class="text-xs text-slate-500 block">梅林街道</span>
                                    </td>
                                    <td class="p-4">
                                        <span class="px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded-full">噪音污染</span>
                                    </td>
                                    <td class="p-4">
                                        <div class="text-sm">
                                            <p class="text-slate-800">置信度: <span class="font-semibold text-green-600">88%</span></p>
                                            <p class="text-xs text-slate-500 mt-1">噪音类型: 施工噪音</p>
                                        </div>
                                    </td>
                                    <td class="p-4">
                                        <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已处理</span>
                                    </td>
                                    <td class="p-4">
                                        <button onclick="showViewModal('#XF20240114023')" class="text-indigo-600 hover:text-indigo-800 text-sm mr-3">
                                            <i class="fas fa-eye mr-1"></i>查看
                                        </button>
                                        <button onclick="showEditModal('#XF20240114023')" class="text-green-600 hover:text-green-800 text-sm">
                                            <i class="fas fa-edit mr-1"></i>编辑
                                        </button>
                                    </td>
                                </tr>

                                <tr class="table-row-hover">
                                    <td class="p-4">
                                        <span class="font-medium text-indigo-600">#XF20240113045</span>
                                    </td>
                                    <td class="p-4">
                                        <div class="max-w-xs">
                                            <p class="text-sm text-slate-800 truncate">宝安区某河流水质发黑发臭，疑似有企业偷排污水...</p>
                                        </div>
                                    </td>
                                    <td class="p-4">
                                        <span class="text-sm text-slate-600">宝安区</span>
                                        <span class="text-xs text-slate-500 block">新安街道</span>
                                    </td>
                                    <td class="p-4">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">水污染</span>
                                    </td>
                                    <td class="p-4">
                                        <div class="text-sm">
                                            <p class="text-slate-800">置信度: <span class="font-semibold text-green-600">95%</span></p>
                                            <p class="text-xs text-slate-500 mt-1">污染物: 化学需氧量、氨氮</p>
                                        </div>
                                    </td>
                                    <td class="p-4">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">调查中</span>
                                    </td>
                                    <td class="p-4">
                                        <button onclick="showViewModal('#XF20240113045')" class="text-indigo-600 hover:text-indigo-800 text-sm mr-3">
                                            <i class="fas fa-eye mr-1"></i>查看
                                        </button>
                                        <button onclick="showEditModal('#XF20240113045')" class="text-green-600 hover:text-green-800 text-sm">
                                            <i class="fas fa-edit mr-1"></i>编辑
                                        </button>
                                    </td>
                                </tr>

                                <tr class="table-row-hover">
                                    <td class="p-4">
                                        <span class="font-medium text-indigo-600">#XF20240112067</span>
                                    </td>
                                    <td class="p-4">
                                        <div class="max-w-xs">
                                            <p class="text-sm text-slate-800 truncate">罗湖区某路段垃圾随意堆放，影响市容环境卫生...</p>
                                        </div>
                                    </td>
                                    <td class="p-4">
                                        <span class="text-sm text-slate-600">罗湖区</span>
                                        <span class="text-xs text-slate-500 block">东门街道</span>
                                    </td>
                                    <td class="p-4">
                                        <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">市容管理</span>
                                    </td>
                                    <td class="p-4">
                                        <div class="text-sm">
                                            <p class="text-slate-800">置信度: <span class="font-semibold text-yellow-600">76%</span></p>
                                            <p class="text-xs text-slate-500 mt-1">问题类型: 垃圾堆放</p>
                                        </div>
                                    </td>
                                    <td class="p-4">
                                        <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已处理</span>
                                    </td>
                                    <td class="p-4">
                                        <button onclick="showViewModal('#XF20240112067')" class="text-indigo-600 hover:text-indigo-800 text-sm mr-3">
                                            <i class="fas fa-eye mr-1"></i>查看
                                        </button>
                                        <button onclick="showEditModal('#XF20240112067')" class="text-green-600 hover:text-green-800 text-sm">
                                            <i class="fas fa-edit mr-1"></i>编辑
                                        </button>
                                    </td>
                                </tr>

                                <tr class="table-row-hover">
                                    <td class="p-4">
                                        <span class="font-medium text-indigo-600">#XF20240111089</span>
                                    </td>
                                    <td class="p-4">
                                        <div class="max-w-xs">
                                            <p class="text-sm text-slate-800 truncate">龙岗区某工业区土壤污染严重，影响周边农作物生长...</p>
                                        </div>
                                    </td>
                                    <td class="p-4">
                                        <span class="text-sm text-slate-600">龙岗区</span>
                                        <span class="text-xs text-slate-500 block">坂田街道</span>
                                    </td>
                                    <td class="p-4">
                                        <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">土壤污染</span>
                                    </td>
                                    <td class="p-4">
                                        <div class="text-sm">
                                            <p class="text-slate-800">置信度: <span class="font-semibold text-green-600">89%</span></p>
                                            <p class="text-xs text-slate-500 mt-1">污染物: 重金属</p>
                                        </div>
                                    </td>
                                    <td class="p-4">
                                        <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">处理中</span>
                                    </td>
                                    <td class="p-4">
                                        <button onclick="showViewModal('#XF20240111089')" class="text-indigo-600 hover:text-indigo-800 text-sm mr-3">
                                            <i class="fas fa-eye mr-1"></i>查看
                                        </button>
                                        <button onclick="showEditModal('#XF20240111089')" class="text-green-600 hover:text-green-800 text-sm">
                                            <i class="fas fa-edit mr-1"></i>编辑
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="p-6 border-t border-slate-200">
                        <div class="flex items-center justify-between">
                            <div class="text-sm text-slate-600">
                                显示 1-10 条，共 234 条结果
                            </div>
                            <div class="flex items-center space-x-2">
                                <button class="page-btn px-3 py-1 rounded-lg" disabled>
                                    <i class="fas fa-chevron-left"></i>
                                </button>
                                <button class="page-btn active px-3 py-1 rounded-lg">1</button>
                                <button class="page-btn px-3 py-1 rounded-lg">2</button>
                                <button class="page-btn px-3 py-1 rounded-lg">3</button>
                                <span class="px-2 text-slate-400">...</span>
                                <button class="page-btn px-3 py-1 rounded-lg">24</button>
                                <button class="page-btn px-3 py-1 rounded-lg">
                                    <i class="fas fa-chevron-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // 侧边栏折叠功能
        const sidebar = document.getElementById('sidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const fadeTexts = document.querySelectorAll('.fade-text');

        sidebarToggle.addEventListener('click', () => {
            const isCollapsed = sidebar.classList.contains('sidebar-collapsed');

            sidebar.classList.toggle('sidebar-collapsed');
            sidebar.classList.toggle('sidebar-expanded');

            setTimeout(() => {
                fadeTexts.forEach(text => {
                    if (sidebar.classList.contains('sidebar-collapsed')) {
                        text.classList.add('hidden');
                    } else {
                        text.classList.remove('hidden');
                    }
                });
            }, isCollapsed ? 0 : 200);
        });

        // 用户菜单
        const userMenuBtn = document.getElementById('userMenuBtn');
        const userMenu = document.getElementById('userMenu');

        userMenuBtn.addEventListener('click', () => {
            userMenu.classList.toggle('hidden');
        });

        // 点击外部关闭菜单
        document.addEventListener('click', (e) => {
            if (!userMenuBtn.contains(e.target) && !userMenu.contains(e.target)) {
                userMenu.classList.add('hidden');
            }
        });

        // 时间范围选择
        const timeRange = document.getElementById('timeRange');
        const customDateRange = document.getElementById('customDateRange');

        timeRange.addEventListener('change', () => {
            if (timeRange.value === '自定义') {
                customDateRange.classList.remove('hidden');
            } else {
                customDateRange.classList.add('hidden');
            }
        });

        // 筛选标签删除
        document.querySelectorAll('.filter-tag .fa-times').forEach(tag => {
            tag.addEventListener('click', () => {
                tag.parentElement.remove();
            });
        });

        // 分页功能
        document.querySelectorAll('.page-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                if (!btn.disabled && !btn.classList.contains('active')) {
                    document.querySelector('.page-btn.active').classList.remove('active');
                    btn.classList.add('active');
                    // 这里可以添加加载对应页数据的逻辑
                }
            });
        });
    </script>

    <!-- 查看详情模态框 -->
    <div id="viewModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-xl font-semibold text-slate-800">信访详情</h3>
                    <button onclick="closeViewModal()" class="text-slate-400 hover:text-slate-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">信访编号</label>
                        <p id="viewId" class="text-slate-800 font-medium">#XF20240115001</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">提交时间</label>
                        <p class="text-slate-800">2024-01-15 14:30:25</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">所属区域</label>
                        <p id="viewArea" class="text-slate-800">南山区沙河街道</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">污染类型</label>
                        <span id="viewPollutionType" class="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">空气污染</span>
                    </div>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-slate-700 mb-2">信访内容</label>
                    <div class="bg-slate-50 rounded-lg p-4">
                        <p id="viewContent" class="text-slate-800 leading-relaxed">
                            深圳市南山区某小区附近工厂排放刺鼻废气，严重影响居民生活。该工厂每天晚上6点到凌晨2点都会排放大量废气，气味非常刺鼻，导致周边居民无法开窗通风，多人出现头晕、恶心等症状。希望相关部门能够尽快查处，还居民一个良好的生活环境。
                        </p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">AI分析结果</label>
                        <div class="bg-slate-50 rounded-lg p-4">
                            <p class="text-slate-800 mb-2">置信度: <span class="font-semibold text-green-600">92%</span></p>
                            <p class="text-slate-800 text-sm">主要污染物: 二氧化硫、氮氧化物</p>
                            <p class="text-slate-800 text-sm">污染等级: 严重</p>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">处理状态</label>
                        <span id="viewStatus" class="px-3 py-1 bg-yellow-100 text-yellow-700 text-sm rounded-full">处理中</span>
                    </div>
                </div>
            </div>
            <div class="p-6 border-t border-slate-200 flex justify-end">
                <button onclick="closeViewModal()" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 编辑模态框 -->
    <div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-xl font-semibold text-slate-800">编辑分析结果</h3>
                    <button onclick="closeEditModal()" class="text-slate-400 hover:text-slate-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">信访编号</label>
                        <input id="editId" type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg bg-slate-50" value="#XF20240115001" readonly>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">污染类型</label>
                        <select id="editPollutionType" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            <option value="空气污染" selected>空气污染</option>
                            <option value="水污染">水污染</option>
                            <option value="土壤污染">土壤污染</option>
                            <option value="噪音污染">噪音污染</option>
                            <option value="市容管理">市容管理</option>
                        </select>
                    </div>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-slate-700 mb-2">AI分析置信度</label>
                    <div class="flex items-center space-x-4">
                        <input id="editConfidence" type="range" min="0" max="100" value="92" class="flex-1">
                        <span id="confidenceValue" class="text-lg font-semibold text-slate-800 w-16 text-center">92%</span>
                    </div>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-slate-700 mb-2">主要污染物</label>
                    <input id="editPollutants" type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" value="二氧化硫、氮氧化物">
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-slate-700 mb-2">处理状态</label>
                    <select id="editStatus" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="待处理">待处理</option>
                        <option value="处理中" selected>处理中</option>
                        <option value="已处理">已处理</option>
                        <option value="调查中">调查中</option>
                    </select>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-slate-700 mb-2">备注</label>
                    <textarea id="editNotes" rows="4" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="添加处理备注..."></textarea>
                </div>
            </div>
            <div class="p-6 border-t border-slate-200 flex justify-end space-x-3">
                <button onclick="closeEditModal()" class="px-6 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                    取消
                </button>
                <button onclick="saveEdit()" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                    保存修改
                </button>
            </div>
        </div>
    </div>

    <script>
        // 显示查看模态框
        function showViewModal(id) {
            document.getElementById('viewModal').classList.remove('hidden');
            document.getElementById('viewModal').classList.add('flex');
            
            // 根据ID加载不同数据（示例）
            const data = {
                '#XF20240115001': {
                    area: '南山区沙河街道',
                    type: '空气污染',
                    typeClass: 'bg-red-100 text-red-700',
                    content: '深圳市南山区某小区附近工厂排放刺鼻废气，严重影响居民生活。该工厂每天晚上6点到凌晨2点都会排放大量废气，气味非常刺鼻，导致周边居民无法开窗通风，多人出现头晕、恶心等症状。希望相关部门能够尽快查处，还居民一个良好的生活环境。',
                    status: '处理中',
                    statusClass: 'bg-yellow-100 text-yellow-700',
                    confidence: '92%',
                    pollutants: '二氧化硫、氮氧化物'
                },
                '#XF20240114023': {
                    area: '福田区梅林街道',
                    type: '噪音污染',
                    typeClass: 'bg-orange-100 text-orange-700',
                    content: '福田区梅林街道某建筑工地夜间施工噪音扰民，影响周边居民休息。工地经常在晚上10点后仍然施工，大型机械产生的噪音严重影响居民睡眠质量，多次沟通无果。',
                    status: '已处理',
                    statusClass: 'bg-green-100 text-green-700',
                    confidence: '88%',
                    pollutants: '施工噪音'
                }
            };
            
            const item = data[id] || data['#XF20240115001'];
            document.getElementById('viewId').textContent = id;
            document.getElementById('viewArea').textContent = item.area;
            document.getElementById('viewPollutionType').textContent = item.type;
            document.getElementById('viewPollutionType').className = `px-2 py-1 ${item.typeClass} text-xs rounded-full`;
            document.getElementById('viewContent').textContent = item.content;
            document.getElementById('viewStatus').textContent = item.status;
            document.getElementById('viewStatus').className = `px-3 py-1 ${item.statusClass} text-sm rounded-full`;
        }

        // 关闭查看模态框
        function closeViewModal() {
            document.getElementById('viewModal').classList.add('hidden');
            document.getElementById('viewModal').classList.remove('flex');
        }

        // 显示编辑模态框
        function showEditModal(id) {
            document.getElementById('editModal').classList.remove('hidden');
            document.getElementById('editModal').classList.add('flex');
            document.getElementById('editId').value = id;
        }

        // 关闭编辑模态框
        function closeEditModal() {
            document.getElementById('editModal').classList.add('hidden');
            document.getElementById('editModal').classList.remove('flex');
        }

        // 保存编辑
        function saveEdit() {
            // 这里添加保存逻辑
            alert('保存成功！');
            closeEditModal();
        }

        // 置信度滑块
        document.getElementById('editConfidence')?.addEventListener('input', (e) => {
            document.getElementById('confidenceValue').textContent = e.target.value + '%';
        });

        // 点击模态框外部关闭
        document.getElementById('viewModal').addEventListener('click', (e) => {
            if (e.target.id === 'viewModal') {
                closeViewModal();
            }
        });

        document.getElementById('editModal').addEventListener('click', (e) => {
            if (e.target.id === 'editModal') {
                closeEditModal();
            }
        });
    </script>
</body>
</html>